<template>
	<view class="form-textarea-box">
		<text class="form-textarea-title" :style="{'min-width':minWidth}" v-if="showTitle">{{title}}</text>
		<view class="form-textarea-content">
			<textarea auto-height class="textarea" :placeholder="placeholder" placeholder-style="font-size: 28rpx;" :value="modelValue" @input="$emit('update:modelValue',$event.detail.value)" />
		</view>
		<view class="form-textarea-line" v-if="showBottomLine"></view>
	</view>
</template>

<script setup>
	defineEmits(['update:modelValue'])
	defineProps({
		//标题
		title:{
			type:String,
			default:'标题'
		},
		//是否展示标题，默认显示
		showTitle:{
			type:Boolean,
			default:true
		},
		//提示输入信息
		placeholder:{
			type:String,
			default:'请输入'
		},
		//双向绑定值
		modelValue:{
			type:String,
			default:''
		},
		//标题最小宽度
		minWidth:{
			type:String,
			default:'120rpx'
		},
		//是否分割线
		showBottomLine:{
			type:Boolean,
			default:true
		}
	})
</script>

<style lang="scss">
.form-textarea-box{
	display: flex;
	align-items: flex-start;
	padding: 30rpx;
	background-color: white;
	position: relative;
	box-sizing: border-box;
	.form-textarea-title{
		flex-shrink: 0;
		min-width: 120rpx;
		margin-right: 40rpx;
	}
	.form-textarea-content{
		flex: 1;
		.textarea{
			font-size: 28rpx;
			border-radius: 0;
			width: 100%;
		}
	}
	.form-textarea-line{
		position: absolute;
		left: 30rpx;
		right: 0;
		bottom: 0;
		height: 1px;
		transform: scaleY(0.5);
		background-color: $xh-line-color;
	}
}
</style>